import { HexColorPicker } from 'react-colorful';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useColor } from '../../context/ColorContext';

interface ColorPickerProps {
  isOpen: boolean;
  onClose: () => void;
}

function ColorPicker({ isOpen, onClose }: ColorPickerProps) {
  const { t } = useTranslation();
  const { primaryColor, setPrimaryColor, secondaryColor, setSecondaryColor } = useColor();
  const [activeColor, setActiveColor] = useState<'primary' | 'secondary'>('primary');

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-secondary-800 rounded-apple p-6 max-w-sm w-full mx-4">
        <h3 className="text-xl font-medium text-secondary-900 dark:text-white mb-4">
          {t('customization.colors')}
        </h3>
        
        <div className="flex gap-4 mb-4">
          <button
            className={`flex-1 p-2 rounded-apple ${
              activeColor === 'primary' 
                ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-500' 
                : 'bg-secondary-100 dark:bg-secondary-700'
            }`}
            onClick={() => setActiveColor('primary')}
          >
            {t('customization.primary')}
          </button>
          <button
            className={`flex-1 p-2 rounded-apple ${
              activeColor === 'secondary' 
                ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-500' 
                : 'bg-secondary-100 dark:bg-secondary-700'
            }`}
            onClick={() => setActiveColor('secondary')}
          >
            {t('customization.secondary')}
          </button>
        </div>

        <HexColorPicker
          color={activeColor === 'primary' ? primaryColor : secondaryColor}
          onChange={activeColor === 'primary' ? setPrimaryColor : setSecondaryColor}
          className="w-full mb-4"
        />

        <button
          onClick={onClose}
          className="w-full bg-primary-500 text-white rounded-apple py-2 hover:bg-primary-600 transition-colors"
        >
          Done
        </button>
      </div>
    </div>
  );
}

export default ColorPicker;